import React, { PureComponent } from "react";
import { connect } from "dva";
import { Card, Table } from "antd";
import styles from "./Dashboard.less";




@connect(({ dashboard, global, loading }) => ({
  chartsData:dashboard.chartsData.repairChart,
  repairStatus:global.dictionaries.repairStatus,
  loading: loading.models.dashboard,
}))
export default class Dashboard extends PureComponent {
  constructor(props) {
    super(props);

  }

  componentDidMount() {

  }



  render() {
    const { chartsData, repairStatus, loading } = this.props;

    const data=[],selfColums=[];
    // chartsData.map((item,index)=>{
    //   const colum={}
    //   colum.key=index;
    //   colum.districtName=item.districtName;
    //   repairStatus.map((e,i)=>{
    //     colum[repairStatus[i].value] = item.devStatus[i];
    //   })
    //   data.push(colum);
    // });

    repairStatus && repairStatus.map((e,i)=>{
      const colum={}
      colum.title = e.label;
      // colum.width = '12%';
      colum.dataIndex= `status${e.value}Count`;
      colum.render = text=> <span>{text}</span>;
      selfColums.push(colum);
    })


    const columns = [{
      title: '',
      dataIndex: 'districtName',
      width:60,
      align:'left',
      render: text=> <span style={{marginLeft:-10}}>{text}</span>,
    }];



    return (
      <Card
        bordered={false}
        bodyStyle={{padding:0}}
        hoverable={true}
        style={{marginTop:15,position:'relative'}}

      >
        <Table className={styles.dashbord_tablechart}
               columns={[...columns,...selfColums]}
               dataSource={chartsData}
               pagination={false}
               size="small"
               rowKey={"districtId"}
               loading={loading}
        />
      </Card>
    );
  }
}
